<template>
	<view>
		<!-- <view class="fan" @click="fan()">
			<image src="../../static/fanhui.png" mode=""></image>
		</view> -->
		<rf-search-bar
		    @link="iconfont"
		    @search="toSearch"
		    :title="' '"
		    :icon="'iconzuo'"
		    :headerShow="headerShow"
		    :placeholder="hotSearchDefault"/>
		<view class="contert">
			<view class="top">
				<image src="../../static/pintuan1.png" mode=""></image>
			</view>

			<view class="vvv" v-if="shopData.length!=0">
				<view class="about" >
					<view class="ab1" v-for="(item , index) in shopData" :key="index">
						<view class="cn">
							{{item.name}}
						</view>
						<view class="price1">
							 ￥{{item.sku[0].wholesale_price}}
						</view>
						<view class="name1">
							
						</view>
						<view class="grab1" @click="toDetail(item.id)">
							去拼团
						</view>
						<view class="img11">
							<image :src="item.picture" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="top1">
				<image src="../../static/pintuan2.png" mode=""></image>
				<view class="coll">
					
				</view>
			</view>

		<view class="ftt">
			<view class="select" >
				<view class="cont">精选</view>
			</view>
			
				<view class="foott" v-if="shopData.length!=0">
					<view class="foot" v-for="(item , index) in shopData" :key="index">
						<view class="left">
							<image :src="item.picture" mode=""></image>
						</view>
						<view class="right">
							<view class="cont">
								{{item.name}}
							</view>
							<view class="grab">
								￥{{item.sku[0].price}}
							</view>
							<view class="price">
								￥{{item.sku[0].wholesale_price}}
							</view>
							<view class="alone">
								单独买
							</view>
							<view class="group">
								{{item.GroupBuyingCount}}人团
							</view>
						
							<view class="tu1" @click="toDetail(item.id)">
								去拼团
							</view>
						</view>
					</view>
				</view>
		</view>
		</view>
	</view>
</template>

<script>
	import { groupBuyingList , groupBuyingView } from "@/api/product";
	import rfSearchBar from '@/components/rf-search-bar/rf-search-bar';
	export default {
		data() {
			return {
				headerShow: true,
				hotSearchDefault: '请输入您要搜索的内容',
				shopData:[]
			};
		},
		onLoad(option) {
			
			this.init();
		},
		methods:{
			init(){
				this.$get(`${groupBuyingList}`, {}).then(r => {
					console.log(r)
					this.shopData = r.data;
				}).catch((err) => {
					console.log(err)
				});
			},
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/product/activeProduct?id=${id}&type=spell`
				})
			},
			iconfont() {
				this.$router.go(-1)
			},
			fan() {
				this.$router.go(-1)
			},

			// 跳转至搜索详情页
			toSearch() {
				uni.navigateTo({
					url: `/pages/index/search/search?search=${JSON.stringify(this.search)}`
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.fan {
		position: absolute;
		z-index: 10;
		width: 24upx;
		height: 42upx;
		top: 30upx;
		left: 30upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.ftt {
		// margin-left: 10upx;
		padding-left: 10upx;
		padding-right: 10upx;
		.select {
			height: 100upx;
			width: 100%;
			background:rgba(255,39,0,1);
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;
			justify-content: space-between;
			.cont {
				// width: 108upx;
				height: 48upx;
				// float: left;
				display:inline-block;
				margin-top: 25upx;
				background:rgba(192,2,2,1);
				border-radius:36px;
				text-align: center;
				padding: 10upx;
				color: #FFFFFF;
				line-height: 34upx;
				margin-left: 30upx;
			}
		}
	}
	.contert {
		width: 100%;
	}
	.top {
		width: 100%;
		height: 470upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.top1 {
		width: 100%;
		height: 260upx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
			z-index: 2;
		}
		.coll {
			position: absolute;
			width: 97.2%;
			height: 100upx;
			bottom: 0;
			margin-left: 10upx;
			// z-index: 10;
			background:rgba(255,0,0,1);
			border-radius: 12px 12px 0 0;
		}
	}
	.vvv {
		overflow: hidden;
		.about {
			height: 250upx;
			width: 100%;
			padding-top:20upx ;
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;
			justify-content: space-between;
			margin-bottom: 15upx;
			.ab1 {
				position: relative;
				width: 347upx;
				height: 230upx;
				// overflow:auto;
				background:linear-gradient(133deg,rgba(255,139,100,1) 0%,rgba(254,79,35,1) 100%);
				box-shadow:0px 2px 3px 0px rgba(221,0,0,0.5);
				margin-left: 20upx;
				display:inline-block;
				 white-space: nowrap;
				 .cn {
				 	float: left;
				 	margin-left: 20upx;
				 	font-size: 24upx;
				 	margin-top: 4upx;
					line-height: 60upx;
				 	color: #fff;
					width: 87%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				 }
				 .tmm {
				 	width: 150upx;
					display: inline-block;
				 	// background-color: #f3f3f3;
				 	height: 40upx;
				 	float: right;
				 	margin-right: 20upx;
				 	font-size: 24upx;
				 	margin-top: 16upx;
					color:rgba(245,1,3,1);
				 	// background-color: #000;
				 	.one {
				 		float: left;
				 		height: 32upx;
				 		width: 34upx;
				 		background-color: #fff;
				 		border-radius: 3px;
				 		text-align: center;
				 		font-weight:400;
				 		color:rgba(245,1,3,1);
				 		line-height: 32upx;
				 	}
				 	.mao {
				 		float: left;
				 		color: #fff;
				 		line-height: 40upx;
				 	}
				 	.two {
				 		float: left;
				 		height: 32upx;
				 		width: 34upx;
				 		background-color: #fff;
				 		border-radius: 3px;
				 		text-align: center;
				 		color: #FF383B;
				 		line-height: 32upx;
				 	}
				 	.three {
				 		float: left;
				 		height: 32upx;
				 		width: 34upx;
				 		background-color: #fff;
				 		border-radius: 3px;
				 		text-align: center;
				 		color: #FF383B;
				 		line-height: 32upx;
				 	}
				 }
				 .price1 {
					 position: absolute;
					 width:96upx;
					 height:44upx;
					 font-size:32upx;
					 font-family:PingFangSC-Medium,PingFang SC;
					 font-weight:500;
					 color:rgba(255,255,255,1);
					 line-height:44upx;
					 top: 60upx;
					 left: 20upx;
				 }
				 .name1 {
					 position: absolute;
					 height:44upx;
					 font-size:32upx;
					 font-family:PingFangSC-Medium,PingFang SC;
					 font-weight:500;
					 color:rgba(255,255,255,1);
					 line-height:44upx;
					 bottom: 70upx;
					 left: 20upx;
				 }
				 .grab1 {
					 position: absolute;
					 // height:17px;
					 font-size:24upx;
					 font-family:PingFangSC-Regular,PingFang SC;
					 font-weight:400;
					 color:rgba(223,32,22,1);
					 // line-height:17px;
					 bottom: 20upx;
					 left: 20upx;
					 padding-left: 5upx;
					 padding-right: 5upx;
					 background-color: #FFFFFF;
					 border-radius: 4px;
					 }
					 .img11 {
						 position: absolute;
						 right: 20upx;
						 bottom: 20upx;
						 width: 80upx;
						 image {
							 width: 100%;
							 height: 100%;
						 }
					 }
			}
		}
	}



		.foott {
			background:rgba(255,0,0,1);
			padding-bottom: 10upx;
			padding-top: 20upx;
			border-radius: 0 0 12px 12px;
			.foot {
				width: 95%;
				height: 260upx;
				margin-bottom: 20upx;
				// padding-left: 20upx;
				// padding-right: 20upx;
				margin-left: 20upx;
				margin-right: 20upx;
				background-color: #fff;
				border-radius: 10upx;
				image{
					border-radius: 5px 0 0 5px;
				}
				.left {
					width: 220upx;
					height: 260upx;
					display: inline-block;
					// background-color: #FF0000;
					float: left;

					image {
						width: 100%;
						height: 100%;
						border-radius: 5px 0 0 5px;
					}
				}
				.right {
					position: relative;
					float: left;
					width: 450upx;
					height: 260upx;
					.cont {
							word-break: break-all; 
							word-wrap: break-word;
							margin-top: 10upx;
							// margin-left: 20upx;
							padding-left: 20upx;
							padding-right: 10upx;
							font-size:28upx;
							font-family:PingFangSC-Regular,PingFang SC;
							display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
							overflow: hidden;
							}
						.grab {
							position: absolute;
							display: inline-block;
							margin-top: 10upx;
							// background:rgba(255,56,59,0.2);
							color:#979797;
							font-size: 24upx;
							border-radius: 2px;
							margin-left: 20upx;
							margin-top: 30upx;
							height: 36upx;
							line-height: 40upx;
							bottom: 100upx;
							
						}
						.group {
							position: absolute;
							display: inline-block;
							color: #FF383B;
							bottom:35upx;
							left: 170upx;
							font-size: 24upx;
						}
						.time {
							position: absolute;
							display: inline-block;
							color: #666666;
							bottom:6upx;
							left: 10upx;
							font-size: 24upx;
						}
						.price {
							
							color: #FF383B;
							font-size:32upx;
							font-family:PingFangSC-Medium,PingFang SC;
							display: inline-block;
							position: absolute;
							bottom: 30upx;
							left: 10upx;
						}
						.gap {
							position: absolute;
							display: inline-block;
							color: #666666;
							bottom:90upx;
							right: 30upx;
							font-size: 24upx;
						}
						.alone {
							position: absolute;
							display: inline-block;
							color: #979797;
							bottom: 90upx;
							left: 150upx;
							right: 0;
							font-size: 24upx;
							}
						.tu1 {
							position: absolute;
							display: inline-block;
							width: 120upx;
							background-color: #FF383B;
							height: 58upx;
							line-height: 58upx;
							right: 0;
							bottom: 30upx;
							border-radius:	30px ;
							text-align: center;
							// padding: 5upx;
							color: #FFFFFF;
							font-size:24upx;
							font-family:PingFangSC-Medium,PingFang SC;
							
						}
						
					}

			}
		}
</style>